<template>
  <view>
    <!-- 自定义导航栏 -->
    <uni-nav-bar :fixed="true" :border="false" :statusBar="true">
      <template v-slot:left>
        <view class="display-default" style="height: 100%;">
          <!-- <view class="display-default navBar-title-left-text" style="margin-left: -10rpx;"
            :style="navBarTitleLeftTextIndexAndSwiperIndex == 0 ? 'font-size: 20px;color: #000;' : ''"
            @click="navBarTitleLeftItemClick(0)">动态</view> -->
          <text class="display-default navBar-title-left-text"
            :style="navBarTitleLeftTextIndexAndSwiperIndex == 0 ? 'font-size: 20px;color: #000;' : ''"
            @click="navBarTitleLeftItemClick(1)">推荐</text>
        </view>
      </template>
      <template v-slot:right>
        <view class="display-default" style="height: 100%;">
          <view class="display-default navBar-title-right-item" @click="navBarTitleRightItemClick('search')">
            <image class="navBar-title-right-icon" src="/static/myIndex/search.svg"></image>
          </view>
          <view class="display-default navBar-title-right-item" style="margin-right: -10rpx;"
            @click="navBarTitleRightItemClick('message')">
            <image class="navBar-title-right-icon" src="/static/myCenter/message.svg">
              <uni-badge style="right: 5rpx;bottom: 15rpx;" :is-dot="true" :text="badgeText" absolute="rightTop"
                size="small"> </uni-badge>
            </image>
          </view>
        </view>
      </template>
    </uni-nav-bar>

    <!-- 内容主体 -->
    <swiper :style="{'height': swiperHeight}" class="swiper" :indicator-dots="false" :autoplay="false" :duration="150"
      :current="navBarTitleLeftTextIndexAndSwiperIndex" @change="currentChange">
      <!-- 动态 -->
      <!--   <swiper-item>
        <view id="oneDom"> 
          111
        </view>
      </swiper-item> -->

      <!-- 推荐 -->
      <swiper-item>
        <view id="twoDom">
          <!-- 轮播图 -->
          <uni-swiper-dot :info="swiperList" :current="swiperDotCurrentIndex" :dotsStyles="dotsStyles">
            <swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" @change="swiperChange">
              <swiper-item class="swiper-item" v-for="(item,index) in swiperList" :key="'key'+index">
                <image class="swiper-img" :src="$url+item.slideshowImage"></image>
                <text class="swiper-text astrict-text" style="width: 70%;">{{item.title}}</text>
              </swiper-item>
            </swiper>
          </uni-swiper-dot>

          <!-- 咨询分类宫格列表 -->
          <uni-grid class="consult-grid" :column="column" :showBorder="false" :square="true">
            <uni-grid-item v-for="(item,index) in consultList" :key="index" v-if="index < column*3">
              <view class="display-default consult-grid-item" @click="consultItemClick(item.consultId)">
                <image class="consult-grid-item-img" :src="$url+item.consultImage">
                </image>
                <text>{{item.consultName}}</text>
              </view>
            </uni-grid-item>
          </uni-grid>

          <!-- 排序类别 -->
          <uni-row class="sort-row">
            <view class="sortTab">
              <uni-col :span="24/sortList.length" v-for="(item,index) in sortList" :key="index">
                <view class="display-default sortTab-item" @click="sortItemClick(item,index)">
                  <text class="sortTab-item-name" :style="item == sortItemName ? 'color:#000;' : ''">{{item}}</text>
                </view>
                <!-- 下边框滑动效果 -->
                <view class="slide" :style="move"></view>
              </uni-col>
            </view>
          </uni-row>

          <!-- 内容主体 -->
          <view class="press-list">
            <view class="press-item" v-for="(item,index) in pressList" :key="index" @click="pressItemClick(item)">
              <view class="display-default press-item-top">
                <!-- 用户头像 -->
                <image class="press-item-top-avatar"
                  :src="item.avatar ? $url+item.avatar : '/static/myCenter/defaultAvatar.png'"></image>
                <!-- 用户昵称和咨询分类 -->
                <view class="press-item-top-userNameAndConsultName">
                  <!-- 用户昵称 -->
                  <view class="display-default">
                    <text class="press-item-top-userName">{{item.username}}</text>
                    <image style="width: 35rpx;height: 35rpx;margin-left: 10rpx;" v-if="item.username == '校园生活服务平台开发者'"
                      src="/static/myIndex/authentication.png"></image>
                  </view>
                  <!-- 咨询分类 -->
                  <text class="press-item-top-consultName">#{{item.consultName}}</text>
                </view>
              </view>
              <!-- 咨询内容 -->
              <view class="press-item-centre">
                <!-- 文字 -->
                <view class="press-item-centre-content">
                  <text>{{item.content}}</text>
                </view>
                <!-- 图片 -->
                <view class="display-default press-item-centre-pressImg-list">
                  <image class="press-item-centre-pressImg" v-for="(items,index) in item.pressImagesList" :key="index"
                    v-if="index < 3" :src="$url+items" mode="aspectFill"
                    @click="previewImage(items,item.pressImagesList,index)" @click.stop="!pressItemClick"></image>
                  <!-- 有图片，并且里面的图片要大于3张，在第三张图片右上角显示张数 -->
                  <view class="press-item-centre-pressImg-imgNum"
                    v-if="item.pressImagesList && item.pressImagesList.length > 3">
                    共{{item.pressImagesList.length}}张
                  </view>
                </view>
              </view>
              <!-- 发布时间、评论数、点赞数 -->
              <view class="press-item-bottom">
                <!-- 格式化后的发布时间 -->
                <view style="color: #7e7e7e;font-size: 11px;">
                  <text>
                    {{item.publishDateInterval}}
                  </text>

                  <uni-dateformat v-if="!item.publishDateInterval" :date="item.publishDate" format="yyyy-MM-dd">
                  </uni-dateformat>
                </view>
                <view class="display-default">
                  <!-- 评论数 -->
                  <view class="ddisplay-default press-comment">
                    <image class="press-commentAndLike-img" src="../../static/myIndex/comment.svg"></image>
                    <text style="color: #7e7e7e;">{{item.commentNum}}</text>
                  </view>
                  <!-- 点赞数 -->
                  <view class="display-default">
                    <image class="press-commentAndLike-img" style="" src="../../static/myIndex/give.svg"></image>
                    <text style="color: #7e7e7e;">{{item.likeNum}}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>

          <!-- 共有3种状态选择： -->
          <!-- more：刷新前状态 -->
          <!-- loading：刷新中状态 -->
          <!-- noMore：无数据时的状态 -->
          <uni-load-more
            :style="pressList.length == 0 ? 'height:100rpx;padding-top: 150rpx;' : 'height:200rpx;padding-bottom: 100rpx;'"
            :status="loadStatus" iconType="circle"></uni-load-more>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 消息中心入口角标显示
        badgeText: 0,
        // 咨询排序下边框样式，动态
        move: 'left:38rpx',
        // 点击底部导航，下拉刷新节流阀
        isTabItem: true,
        // 顶部标题栏索引id And 当前轮播图滑块所在的id
        // navBarTitleLeftTextIndexAndSwiperIndex: 1, 
        navBarTitleLeftTextIndexAndSwiperIndex: 0, // 初始轮播位置 
        // 咨询分类每行个数
        column: 5,
        // 预设的swiper高度， 100vh屏幕高度
        swiperHeight: '100vh',
        // 轮播图指示点索引
        swiperDotCurrentIndex: 0,
        // 底部load刷新的状态
        loadStatus: 'more',
        // 轮播图数据
        swiperList: [],
        // 咨询分类数据
        consultList: [],
        // 咨询列表数据
        pressList: [],
        // 轮播图指示点样式
        dotsStyles: {
          selectedBackgroundColor: '#fff',
        },
        // 咨询排序列表
        sortList: [
          '最新发布', '24小时热门', '历史最热', '最新评论'
        ],
        pageNum: 1, // 页码
        pageSize: 5, // 每页显示的数量
        total: 0, // 咨询的总条数
        consultId: '', // 当前点击的咨询分类的id
        sortItemName: '最新发布', // 当前点击的咨询排序名称
        isLoading: false // isLoading:同步数据请求（限制同时只能有一次数据请求）
      }
    },
    async onLoad() {
      // uni.showLoading({
      //   title: '正在加载中...' 
      // })
      this.token = await uni.getStorageSync('token')

      this.loadStatus = 'loading'

      await this.getSwiperList()
      await this.getConsultList()
      await this.getPressListByMore('', '0', 1, 5)
      await this.setSwiperHeight('#twoDom') // 热门导航员节点#oneDom，推荐导航页节点#twoDom

      // 登陆状态下
      if (this.token) {
        // 获取用户是否有消息通知
        await this.getAllNoticeByUid()
      }
      // uni.hideLoading()
    },
    async onPullDownRefresh() {
      uni.showLoading({
        title: '正在加载中...'
      })
      // 重置一些重要的相关数据数据
      this.move = 'left:38rpx'
      this.sortItemName = '最新发布'
      this.loadStatus = 'loading'
      this.pageNum = 1
      this.swiperList = []
      this.consultList = []
      this.pressList = []
      // 重新调用方法进行获取
      await this.getSwiperList()
      await this.getConsultList()
      await this.getPressListByMore('', '0', 1, 5)
      await this.setSwiperHeight('#twoDom') // 动态导航页节点#oneDom，推荐导航页节点#twoDom

      // 登陆状态下
      if (this.token) {
        // 获取用户是否有消息通知
        await this.getAllNoticeByUid()
      }

      console.log("已刷新");

      // 关闭下拉刷新
      uni.stopPullDownRefresh()
      // 关闭节流阀，这里必须要设置延迟500ms-因为关闭下拉刷新有个延迟。
      // 关闭了之后要过一会才能开启
      setTimeout(() => {
        this.isTabItem = true
      }, 500)

      uni.hideLoading()
    },
    async onReachBottom() {
      // 1.判断是否正在加载其他数据请求
      if (this.isLoading) return
      // 2.页码数(pageNum) * 每页数据(pageSize) >= 总数(total) 以防溢出多余的网络请求，消耗资源
      if (this.pageNum * this.pageSize >= this.total) {
        return uni.showToast({
          title: '没有更多数据了',
          icon: 'none',
          position: 'center'
        });
      }
      this.loadStatus = 'loading'
      this.pageNum += 1;

      if (this.sortItemName == '最新发布') {
        await this.getPressListByMore(this.consultId, '0', this.pageNum, this.pageSize)
      } else if (this.sortItemName == '24小时热门') {
        await this.getPressListByInterval24HourHot(this.consultId, '0', this.pageNum, this.pageSize)
      } else if (this.sortItemName == '历史最热') {
        await this.getPressListByMostHot(this.consultId, '0', this.pageNum, this.pageSize)
      } else if (this.sortItemName == '最新评论') {
        await this.getPressListByNewCommentDate(this.consultId, '0', this.pageNum, this.pageSize)
      }

      await this.setSwiperHeight('#twoDom')
    },

    /**
     * @description 使用这个生命函数的原因：为了监听用户发布后，数据要及时更新，这里使用本地缓存，待改进！
     */
    async onShow() {
      // 每当页面显示时，会获取本地token，免得用户从登陆页面返回未能及时获取
      this.token = await uni.getStorageSync('token')

      // 获取上一页面的返回消息体
      // 1. 从发布页面回来的 2. 从已删除咨询详情页回来的
      if (uni.getStorageSync('isPublishPress') || uni.getStorageSync('isPressDetail')) {
        // 重置一些重要的相关数据数据
        this.move = 'left:38rpx'
        this.loadStatus = 'loading'
        this.pageNum = 1
        this.pressList = []
        // 重新调用方法进行获取 
        await this.getPressListByMore('', '0', 1, 5)
        await this.setSwiperHeight('#twoDom') // 热门导航栏节点#oneDom，推荐导航页节点#twoDom

        // 清空返回消息体
        uni.removeStorageSync('isPublishPress')
        uni.removeStorageSync('isPressDetail')
      }

      // 获取上一页面的返回消息体
      // 1. 从消息中心页面回来的（必须有进入过消息详情跳转页的）2. 从登陆页面回来的
      if (uni.getStorageSync('isUserMessageCenterToIndex') || uni.getStorageSync('isLoginViewToIndex')) {
        // 重新调用方法进行获取消息图标红点角标
        await this.getAllNoticeByUid()

        // 清空返回消息体
        uni.removeStorageSync('isUserMessageCenterToIndex')
        uni.removeStorageSync('isLoginViewToIndex')
      }
    },
    onTabItemTap(e) {
      console.log("this.isTabItem: ", this.isTabItem);
      console.log("e: " + JSON.stringify(e));
      // 每次点击底部首页时判断是否第二次点击
      // this.isTabItem是节流阀，保证每次只能同时进行一次刷新
      if (uni.getStorageSync('tabItemName') == '首页' && this.isTabItem) {
        // 开启节流阀
        this.isTabItem = false
        // 开启下拉刷新
        uni.startPullDownRefresh()
      }
      // 本地缓存值更改
      uni.setStorageSync('tabItemName', '首页')
    },
    methods: {
      /**
       * @description ：根据学生uid查询用户需要接收的所有通知-有联合索引[noticeRelationId和uid组成联合索引]
       * 1. not in查询，根据学生id查询t_notice_relation表里是否有包含对应noticeId的通知，包含且已经删除则不予发送
       * 2. 如果用户注册时间大于通知时间则不予发送
       * 3. 如果t_notice_relation表里的通知记录已被删除则不予发送
       * @param token 请求头token参数
       */
      async getAllNoticeByUid() {
        this.$forceUpdate()
        await this.$http.notice.getAllNoticeInfoByUid(this.token).then(res => {
          // console.log("res: " + JSON.stringify(res));
          if (res.code == 401) {
            // uni.showToast({
            //   title: res.msg,
            //   icon: 'none',
            //   position: 'center'
            // })
            return
          }
          if (!res.code) {
            uni.showToast({
              title: '服务器开小差了',
              icon: 'none',
              position: 'center'
            })
            return
          }

          // 获取到消息数据之后，循环查找看是否全部阅读过了
          for (let i = 0; i < res.data.length; i++) {
            // 判断通知列表中是否有未阅读的通知
            if (res.data[i].isRead != 1) {
              // 有，那就显示消息图片红点角标
              this.badgeText = 1
              this.$forceUpdate()
              // 如果还有未读取的消息，那就不用再循环了
              return
            }
          }

          // 如果没有未阅读的，角标取消
          this.badgeText = 0
          this.$forceUpdate()
        }).catch(err => {
          console.log("res: " + JSON.stringify(res));
        })
      },

      /**
       * @description 咨询排序分类点击事件
       * @param name 排序分类名称
       * @param index 排序分类索引
       */
      async sortItemClick(name, index) {
        // console.error("loadStatus：",this.isLoading);
        this.sortItemName = name // 获取排序的名称并存入
        // <!-- 共有3种状态选择： -->
        // <!-- more：刷新前状态 -->
        // <!-- loading：刷新中状态 -->
        // <!-- noMore：无数据时的状态 -->
        this.loadStatus = 'loading' // 更改咨询列表
        this.pageNum = 1

        // console.log(name, index);

        // 清空数据，重新加入
        this.pressList = []

        // sort排序类别-下边框滑动效果
        this.move = 'left:' + (187 * index + 38) + 'rpx;'

        if (name == '最新发布') {
          await this.getPressListByMore(this.consultId, '0', this.pageNum, this.pageSize)
        } else if (name == '24小时热门') {
          await this.getPressListByInterval24HourHot(this.consultId, '0', this.pageNum, this.pageSize)
        } else if (name == '历史最热') {
          await this.getPressListByMostHot(this.consultId, '0', this.pageNum, this.pageSize)
        } else if (name == '最新评论') {
          await this.getPressListByNewCommentDate(this.consultId, '0', this.pageNum, this.pageSize)
        }

        await this.setSwiperHeight('#twoDom') // 热门导航栏节点#oneDom，推荐导航页节点#twoDom
      },

      /**
       * @description 获取首页轮播图
       */
      async getSwiperList() {
        await this.$http.index.getSlideshowAllByType('0').then(res => {
          // console.log("res: " + JSON.stringify(res));
          if (res.code == 401) {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              position: 'center'
            })
            return
          }
          if (!res.code) {
            uni.showToast({
              title: '服务器开小差了',
              icon: 'none',
              position: 'center'
            });
            return
          }

          this.swiperList = res.data.sort(function(a, b) {
            return a.sort - b.sort // 对排序字段进行排序
          })
        }).catch(err => {
          console.log("err: " + JSON.stringify(err));
        })
      },

      /**
       * @description 获取首页全部咨询分类
       */
      async getConsultList() {
        await this.$http.index.getConsultListInfo().then(res => {
          // console.log("res: " + JSON.stringify(res));
          if (res.code == 401) {
            return uni.showToast({
              title: res.msg,
              icon: 'none',
              position: 'center'
            })
          } else if (!res.code) {
            return uni.showToast({
              title: '服务器开小差了',
              icon: 'none',
              position: 'center'
            });
          }

          this.consultList = res.data.sort(function(a, b) {
            return a.sort - b.sort // 对排序字段进行排序
          })
        }).catch(err => {
          console.log("err: " + JSON.stringify(err));
        })
      },

      /**
       * @description 首页咨询分类Item点击
       * @param id 咨询分类id
       */
      consultItemClick(id) {
        console.log('consultId：', id);
        if (id == 1) {
          // id等于1为首页，默认获取全部咨询
          this.consultId = ''
        } else if (id == 13) {
          // 跳转至场馆预约
          uni.navigateTo({
            url: '/pages/sportsView/sportsView'
          })
          return
        } else if (id == 11) {
          // 跳转至今日菜系
          uni.navigateTo({
            url: '/pages/todayCuisine/todayCuisine'
          })
          return
        } else {
          // 点击其它的id获取对应分类的咨询
          this.consultId = id
        }

        // 重新获取press
        this.sortItemClick('最新发布', 0)
      },

      /**
       * @description 咨询item项点击
       */
      pressItemClick(item) {
        // console.log("item: " + JSON.stringify(item));
        /**
         * 这里出现了错误！！
         * 这个错误直接导致上一页面还能正常显示发布时间，到详情页就消失 NaN
         * 错误回溯：
            url: `/pages/pressDetail/pressDetail?press=${JSON.stringify(item)}`
         * 正确写法：
            url: `/pages/pressDetail/pressDetail?press=${encodeURIComponent(JSON.stringify(item))}`
         * 最后根据字符串比较，发现传参过后时间内少了一个+号，导致NaN，所以传参json类型一定要用encodeURIComponent不然会出问题
         * encodeuricomponent可把字符串作为 URI 组件进行编码。可将一些特殊字符进行转义
         */
        uni.navigateTo({
          url: `/pages/pressDetail/pressDetail?pressId=${item.pressId}`
        })
      },

      /**
       * @description 预览多张图片Item点击
       */
      previewImage(imgUrl, imgList, index) {
        let formatImgList = []
        let formatImgUrl = this.$url + imgUrl

        for (let i = 0; i < imgList.length; i++) {
          formatImgList.push(this.$url + imgList[i])
        }

        uni.previewImage({
          urls: formatImgList, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
          current: formatImgUrl // 当前显示图片的http链接，默认是第一个
        })
      },

      /**
       * @description 获取最新咨询列表，默认根据最新发布时间排序
       * @param consultId 咨询类别id
       * @param status 状态
       * @param pageNum 页码
       * @param pageSize 每页显示的数量
       */
      async getPressListByMore(consultId, status, pageNum, pageSize) {
        // 同步（锁定该数据请求，无法被上拉触底函数调用）
        this.isLoading = true

        await this.$http.index.getPressListInfoByMore(consultId, status, pageNum, pageSize).then(res => {
          // console.log("res: " + JSON.stringify(res));

          if (res.code == 401) {
            this.total = 0
            return uni.showToast({
              title: res.msg,
              icon: 'none',
              position: 'center'
            })
          } else if (!res.code) {
            return uni.showToast({
              title: '服务器开小差了',
              icon: 'none',
              position: 'center'
            });
          }

          this.total = res.data.total // 获取后端发送的数据条目总数量
          this.pressList = this.pressList.concat(res.data.rows)
        }).catch(err => {
          console.error("err: " + err);
        })

        this.isLoading = false
      },

      /**
       * @description 获取24小时热门咨询列表
       * @param consultId 咨询类别id
       * @param status 状态
       * @param pageNum 页码
       * @param pageSize 每页显示的数量
       */
      async getPressListByInterval24HourHot(consultId, status, pageNum, pageSize) {
        // 同步（锁定该数据请求，无法被上拉触底函数调用）
        this.isLoading = true

        await this.$http.index.getPressListInfoByInterval24HourHot(consultId, status, pageNum, pageSize)
          .then(
            res => {
              // console.log("res: " + JSON.stringify(res));

              if (res.code == 401) {
                this.total = 0
                return uni.showToast({
                  title: res.msg,
                  icon: 'none',
                  position: 'center'
                })
              } else if (!res.code) {
                return uni.showToast({
                  title: '服务器开小差了',
                  icon: 'none',
                  position: 'center'
                });
              }

              this.total = res.data.total // 获取后端发送的数据条目总数量
              this.pressList = this.pressList.concat(res.data.rows)
            }).catch(err => {
            console.log("err: " + JSON.stringify(err));
          })

        this.isLoading = false
      },

      /**
       * @description 获取历史最热门的咨询列表
       * @param consultId 咨询类别id
       * @param status 状态
       * @param pageNum 页码
       * @param pageSize 每页显示的数量
       */
      async getPressListByMostHot(consultId, status, pageNum, pageSize) {
        // 同步（锁定该数据请求，无法被上拉触底函数调用）
        this.isLoading = true

        await this.$http.index.getPressListInfoByMostHot(consultId, status, pageNum, pageSize)

          .then(
            res => {
              // console.log("res: " + JSON.stringify(res));

              if (res.code == 401) {
                this.total = 0
                return uni.showToast({
                  title: res.msg,
                  icon: 'none',
                  position: 'center'
                })
              } else if (!res.code) {
                return uni.showToast({
                  title: '服务器开小差了',
                  icon: 'none',
                  position: 'center'
                });
              }

              this.total = res.data.total // 获取后端发送的数据条目总数量
              this.pressList = this.pressList.concat(res.data.rows)
            }).catch(err => {
            console.log("err: " + JSON.stringify(err));
          })

        this.isLoading = false
      },

      /**
       * @description 获取最新评论时间的咨询
       * @param consultId 咨询类别id
       * @param status 状态
       * @param pageNum 页码
       * @param pageSize 每页显示的数量
       */
      async getPressListByNewCommentDate(consultId, status, pageNum, pageSize) {
        // 同步（锁定该数据请求，无法被上拉触底函数调用）
        this.isLoading = true

        await this.$http.index.getPressListInfoByNewCommentDate(consultId, status, pageNum, pageSize)
          .then(
            res => {
              // console.log("res: " + JSON.stringify(res));

              if (res.code == 401) {
                this.total = 0
                return uni.showToast({
                  title: res.msg,
                  icon: 'none',
                  position: 'center'
                })
              } else if (!res.code) {
                return uni.showToast({
                  title: '服务器开小差了',
                  icon: 'none',
                  position: 'center'
                });
              }

              this.total = res.data.total // 获取后端发送的数据条目总数量
              this.pressList = this.pressList.concat(res.data.rows)
            }).catch(err => {
            console.log("err: " + JSON.stringify(err));
          })

        this.isLoading = false
      },

      /**
       * @description 获取顶部标题栏左侧[动态、推荐]点击时触发事件
       * @param index [动态、推荐]点击时的索引
       */
      navBarTitleLeftItemClick(index) {
        // if (index == 0) {
        //   this.setSwiperHeight('#oneDom')
        // } else {
        //   this.setSwiperHeight('#twoDom')
        // }
        // this.navBarTitleLeftTextIndexAndSwiperIndex = index
      },

      /**
       * @description 顶部标题栏右侧[图标]点击时触发事件
       * @param index [图标]点击时的索引
       */
      navBarTitleRightItemClick(index) {
        console.log(index);

        if (index == 'search') {
          uni.navigateTo({
            url: '/pages/useSearch/useSearch'
          });
          return
        }

        if (!this.token) {
          // #ifdef H5
          // this.$refs.loginPopup.open() 
          return
          // #endif

          // #ifndef H5
          uni.navigateTo({
            url: "/pages/customPopup/customPopup?title=该功能需要登录后使用，是否登录？&confirmText=去登录&type=login"
          })
          return
          // #endif
        }

        if (index == 'message') {
          uni.navigateTo({
            url: '/pages/userMessageCenter/userMessageCenter'
          });
          return
        }
      },

      /**
       * @description 顶部导航栏[热门/推荐]swiper的current值改变时触发事件
       * @param e current值改变时返回的值
       */
      currentChange(e) {
        // if (e.detail.current == 0) {
        //   this.setSwiperHeight('#oneDom')
        // } else {
        //   this.setSwiperHeight('#twoDom')
        // }
        // this.navBarTitleLeftTextIndexAndSwiperIndex = e.detail.current
      },

      /**
       * @description 监听首页轮播图swiper滚动
       * @param e 首页轮播图swiper滚动时current值改变时返回的值
       */
      swiperChange(e) {
        this.swiperDotCurrentIndex = e.detail.current
      },

      /**
       * @description 页面加载时运行，效果是自动获取当前页面的轮播高度并自适应
       * @param element 传入一个页面节点元素[.text/#text/text]
       */
      async setSwiperHeight(element) {
        await new Promise((resolve, reject) => {
          // 延时设置高度 -- 一定要延时，否则报错 - 300毫秒一般都够了
          setTimeout(() => {

            // uniapp自带方法 - 获取DOM的高度等信息
            // https://uniapp.dcloud.net.cn/api/ui/nodes-info.html#createselectorquery

            // 节点查询
            const query = uni.createSelectorQuery().in(this)

            // 开始
            query.select(element).boundingClientRect(data => {

              // console.log("【DOM尺寸信息】" + JSON.stringify(data))

              // 获取DOM的高度， 单位是像素
              let h = data.height

              // 补上单位
              h += 'px'
              // 实际高度赋值给swiper
              this.swiperHeight = h

              console.log('【动态设置高度】', h)

            }).exec()

            if (this.pageNum * this.pageSize >= this.total) {
              this.loadStatus = 'noMore'
            } else {
              this.loadStatus = 'more'
            }
            return resolve()
          }, 300)
        })
      }
    }
  }
</script>

<style lang="scss">
  // 全局背景色
  page {
    // background: #f9f9f9;
  }

  // 列表容器
  .press-list {
    background: #fff;

    // 内容item项
    & .press-item {
      display: flex;
      flex-direction: column;
      padding: 30rpx;
      border-top: 1px solid #f0f0f0;

      // 内容头部
      & .press-item-top {
        height: 80rpx;
        margin-bottom: 20rpx;
        justify-content: flex-start;

        // 头像
        & .press-item-top-avatar {
          width: 80rpx;
          height: 100%;
          border-radius: 60px;
          margin-right: 25rpx;
          background: #fff;
        }

        // 用户昵称和咨询分类名称的容器
        & .press-item-top-userNameAndConsultName {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          height: 100%;

          // 用户昵称
          & .press-item-top-userName {
            font-size: 17px;
            // font-weight: 700;
          }

          // 咨询分类名称
          & .press-item-top-consultName {
            font-size: 14px;
            color: #666;
          }
        }
      }

      // 内容主体
      & .press-item-centre {
        margin-bottom: 20rpx;

        // 内容
        & .press-item-centre-content {
          margin-bottom: 20rpx;
          font-size: 16px;
          word-break: break-word; //如果不想单词内断行可以进行单词间的断行
        }

        & .press-item-centre-pressImg-list {
          flex-wrap: wrap;
          justify-content: flex-start;
          position: relative;

          & .press-item-centre-pressImg {
            width: 32.3%;
            margin-right: 1%;
            height: 200rpx;
            border-radius: 10rpx;
          }

          & .press-item-centre-pressImg-imgNum {
            position: absolute;
            right: 0;
            top: 0;
            color: #fff;
            background: rgba(0, 0, 0, 0.5);
            font-size: 11px;
            padding: 0 10rpx;
          }
        }

      }

      // 内容底部
      & .press-item-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;

        // 咨询评论
        & .press-comment {
          margin-right: 20rpx;
          display: flex;
          align-items: center;

        }

        // 咨询评论图片、点赞图片
        & .press-commentAndLike-img {
          width: 38rpx;
          height: 38rpx;
          margin-right: 10rpx;
        }
      }
    }

    & .press-item:active {
      background: #f7f7f7;
    }
  }


  // 自定义导航栏样式-1
  /deep/ .uni-navbar__header {
    padding: 0px;
  }

  /deep/ .uni-navbar__header-btns-left {
    flex: 5;
  }

  /deep/ .uni-navbar__header-btns-right {
    flex: 5;
  }

  // 自定义导航栏-2
  .navBar-title-left-text {
    height: 100%;
    font-size: 16px;
    color: #444444;
    width: 120rpx;
    transition-property: font-size;
    transition-duration: 0.1s;
    transition-timing-function: ease-in;
  }

  .navBar-title-right-item {
    height: 100%;
    width: 80rpx;

    & .navBar-title-right-icon {
      width: 45rpx;
      height: 45rpx;
    }
  }

  // 轮播图
  .swiper-item {
    position: relative;
    display: flex;
    background: #fff;
    justify-content: center;

    & .swiper-img {
      border-radius: 15px;
      width: 95%;
      height: 100%;
    }

    & .swiper-text {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 45rpx;
      margin: auto;
      font-size: 16px;
      color: #fff;
      text-align: center;
    }
  }

  // 咨询分类宫格列表
  .consult-grid {
    background: #fff;
    padding: 20rpx 0;

    & .consult-grid-item {
      width: 100%;
      height: 100%;
      flex-direction: column;
    }

    & .consult-grid-item-img {
      width: 70rpx;
      height: 70rpx;
    }
  }

  // 排序类别
  .sort-row {
    margin-top: 8rpx;
    background: #fff;

    // sort排序类别-view容器
    & .sortTab {
      // padding-bottom: 20rpx;
      font-size: 14px;
      background: #fff;
      position: relative;
      cursor: pointer;
      display: flex;
      /* 防止滑动时 产生保留上次效果 浏览器问题*/
      overflow: hidden;

      // 排序item项
      & .sortTab-item {
        padding: 30rpx 0;

        & .sortTab-item-name {
          color: #8f8f8f;
        }
      }

      // sort排序类别-下边框
      & .slide {
        position: absolute;
        left: 0;
        bottom: 0rpx;
        width: 4em;
        height: 6rpx;
        // background: #023d99;
        background: #000;
        transition: all .3s;
      }
    }
  }
</style>
